<template>
  <div class="all">
    <div class="order">
      <!-- 头部标题 -->
      <Header />
      <!-- 地址选择栏 -->

      <!-- 订单栏 -->
      <div class="ordershop">
        <div class="item" v-for="(items, indexs) in shopList" :key="indexs">
          <div class="top">
            <div class="topitem">
              订单号: <span>{{ items.ordernumber_id }}</span>
            </div>
            <span>等待买家付款</span>
          </div>
          <div class="content" v-for="(item, index) in items.arr" :key="index">
            <div class="pic">
              <img :src="item.orderfrom_src" alt="" />
            </div>
            <div class="content_all">
              <div class="content_title">
                <div class="every">{{ item.orderfrom_des }}</div>
                <div class="every_price">￥{{ item.orderfrom_price }}</div>
              </div>
              <div class="content_number">×{{ item.orderfrom_number }}</div>
            </div>
          </div>
          <!-- <div class="content">
          <img src="" alt="" />
          <div class="content_all"></div>
        </div> -->
          <div class="price">
            需付款￥<span>{{ items.total_price }}</span>
          </div>
          <div class="pay">
            <van-button
              type="default"
              size="small"
              @click="delOrder(items.ordernumber_id)"
              round
              >删除订单</van-button
            >
            <van-button
              type="default"
              size="small"
              round
              @click="goPay(items.ordernumber_id, items.total_price)"
              >继续付款</van-button
            >
          </div>
        </div>
        <!-- <div class="item"></div> -->
      </div>
      <!-- 结算栏 -->
      <!-- <van-submit-bar :price="3050" button-text="结算订单" @submit="onSubmit" /> -->
    </div>
  </div>
</template>

<script>
import Header from "@/components/order/Header"
import { inject } from "vue"
import { Toast } from "vant"
import { Dialog } from "vant"
inject["reload"]
export default {
  components: {
    Header,
  },

  created() {
    this.getOrderData()
  },

  data() {
    return {
      shopList: [],
    }
  },

  methods: {
    getOrderData() {
      this.$api.order.orderData().then((res) => {
        console.log(res)
        this.shopList = res.data
      })
      // window.location.reload()
    },

    // 删除订单
    delOrder(id) {
      Dialog.confirm({
        title: "提示",
        message: "是否删除该订单",
      })
        .then(() => {
          // on confirm
          let params = { id }
          this.$api.order.delOrder(params).then((res) => {
            console.log(res)
            if (res.code == 200) {
              Toast("删除成功")
            }
            this.getOrderData()
          })
        })
        .catch(() => {
          // on cancel
        })
      // console.log(id)
    },

    // 支付订单
    goPay(id, price) {
      /*这是支付请求*/
      console.log(id, price)
      let params = { id, price }
      this.$api.pay.payment(params).then((res) => {
        console.log(res)
        if (res.data.success) {
          window.location.href = res.data.paymentUrl
        }
      })
    },

    onSubmit() {
      console.log(1)
    },
  },
}
</script>

<style lang="less" scoped>
.all {
  width: 100vw;
  height: 100%;
  background-color: rgb(242, 242, 242);
}
.order {
  width: 100vw;
  height: 130vh;
  // background-color: rgb(242, 242, 242);

  // 订单栏
  .ordershop {
    width: 100%;
    height: 400px;
    padding: 20px;
    // background-color: pink;

    .item {
      padding: 0.625rem /* 10/16 */;
      width: 100%;
      // height: 9.375rem /* 150/16 */;
      border-radius: 0.625rem /* 10/16 */;
      background-color: #fff;
      margin-bottom: 0.625rem /* 10/16 */;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span:nth-child(1) {
          font-size: 0.875rem /* 14/16 */;
          color: rgb(167, 167, 167);
        }
      }

      .content {
        display: flex;
        margin: 0.625rem /* 10/16 */ 0;
        width: 100%;
        height: 5rem;
        // background-color: yellow;
        img {
          width: 5rem /* 80/16 */;
          height: 100%;
          border-radius: 0.625rem /* 10/16 */;
          object-fit: cover;
          // background-color: #fff;
        }

        .content_all {
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          margin-left: 0.625rem /* 10/16 */;
          width: 100% /* 100/16 */;
          height: 100%;
          // background-color: green;

          .content_title {
            display: flex;
            justify-content: space-between;
            .every {
              width: 11.25rem /* 180/16 */;
              text-overflow: ellipsis; /* 将文本溢出显示... */
              overflow: hidden; /* 超出隐藏 */
              word-break: break-all; /* break-all(允许在单词内换行) */
              display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
              -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
              -webkit-line-clamp: 1; /* 呈现几行 我这里设置两行,可自行调试 */
            }

            .every_price {
              color: red;
            }
          }

          .content_number {
            display: flex;
            justify-content: end;
            margin-top: 0.9375rem /* 15/16 */;
          }
        }
      }

      .price {
        display: flex;
        justify-content: end;
        color: red;

        span {
          font-size: 1.25rem /* 20/16 */;
        }
      }

      .pay {
        margin-top: 0.625rem /* 10/16 */;
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>
